<template>
  <div class="h100 subscriptionPage">
    <full-parent-dom-with-dask :tip="operationTip" :loading="spinningLoading"></full-parent-dom-with-dask>
    <div class="subscriptionSearch table-page-search-wrapper">
      <subscription-search @clickbtn="handleClickSearchBtn"></subscription-search>
    </div>
    <div class="subscriptionMain">
      <subscription-table-list ref="subscriptionMainComp" @clickbtn="handleMainCompClick"></subscription-table-list>
    </div>
  </div>
</template>
<script>
import SubscriptionSearch from './components/SubscriptionSearch.vue'
import SubscriptionTableList from './components/SubscriptionTableList.vue'
import SubscriptionSearchForm from './components/SubscriptionSearchForm.vue'
import { mapState, mapMutations } from 'vuex'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { minxinDrawerUse } from '@/utils/mixin'
import SubscriptionDetail from './components/SubscriptionDetail'
import DetailSubscriptionServe from '@/views/components/SubscriptionserveDetail'
import CarModelDetail from '@/views/vehicle/components/CarModelDetail'
import ServiceDetail from '@/views/components/ServiceDetail.vue'
export default {
  mixins: [minxinDrawerUse],
  components: {
    SubscriptionSearch,
    SubscriptionTableList,
    SubscriptionSearchForm,
    FullParentDomWithDask,
    SubscriptionDetail,
    DetailSubscriptionServe,
    CarModelDetail,
    ServiceDetail
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.subscription.queryParams
    })
  },
  data () {
    return {
      // 用来控制子组件需要强制刷新数据的属性
      nowTime: 1000,
      spinningLoading: false,
      operationTip: ''
    }
  },
  created () {
  },
  methods: {
    handleClickSearchBtn (data) {
      this.nowTime = new Date().getTime()
      if (this[data.type]) {
        this[data.type]()
      }
    },
    handleMainCompClick (data) {
      this.nowTime = new Date().getTime()
      if (this[data.type]) {
        this[data.type](data.data)
      }
    },
    openSearchComp () {
      const _this = this
      const buttons = [{
        key: '',
        title: 'inquiry',
        type: 'primary',
        name: 'searchBtn',
        method () {
          _this.searchData(true)
        },
        callback: null,
        loading: false,
        disabled: false
      }, {
        key: '',
        title: 'cancel',
        type: 'info',
        name: 'cancelBtn',
        method: null,
        callback: null,
        loading: false,
        disabled: false
      }]
      const vars = { nowTime: Date.now(), class: 'rightDrawerWithoutCol', searchFun: _this.searchData }
      this.showRightDrawer(SubscriptionSearchForm, this.$t('激活服务查询'), buttons, '460px', vars)
    },
    searchData (isToFirstPage) {
      this.$refs.subscriptionMainComp.refreshData(isToFirstPage)
    },
    showGroupDetail (record) {
      const vars = {
        id: record.id,
        nowTime: Date.now()
      }
      this.showRightDrawer('', this.$t('groupDetail'), [], 'large', vars)
    },
    // 查看服务详情
    showDetailSubscriptionServe (record) {
      const serveInfor = this.serveList.find(item => item.serveCode === record.serverCode)
      const vars = {
        serveInfor
      }
      this.showRightDrawer(DetailSubscriptionServe, serveInfor.serveName, [], 'large', vars)
    },
    // 查看订阅服务详情
    showSubscriptionDetail (record) {
      const vars = {
        nowTime: Date.now(),
        info: {
          vin: record.vin,
          serviceCode: record.serviceCode,
          serviceName: record.serviceName,
          expiration: record.expiration,
          serviceStatus: record.serviceStatus,
        }
      }
      this.showRightDrawer(SubscriptionDetail, this.$t('orderInfoService'), [], 'large', vars)
    },
    // 查看车辆详情
    showVehicleDetail (record) {
      // 车辆已经不存在
      if (record.vehicleDeleted) {
        this.$message.warning(this.$t('carDeleted'))
        return
      }
      this.showRightDrawer(CarModelDetail, this.$t('vehicleDetail'), [], 'huge', { time: Date.now(), vin: record.vin })
    },
    // 查看服务详情
    showServiceDetail (record) {
      const vm = this
      const vars = { serviceId: record.serviceId }
      vm.showRightDrawer(ServiceDetail, vm.$t('serviceDetail'), [], 'large', vars)
    }
  },
  beforeDestroy () {
    this.$store.commit('resetSubscriptionMaintainQueryParams')
  }

}
</script>
<style lang="less">
@import url("./style/list.less");
</style>
